<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
<div id="app" style="width:50%;margin:30px auto;">

    <div v-if="success">
        <h2 style="color: cadetblue">欢迎：{{user.name}} &nbsp;&nbsp; <a href="javascript:void(0)" @click="logout">登出</a></h2>
    </div>

    <div v-if="!success">
        <h2 style="color: red">{{msg}}</h2>
        <h1 align="center">登录界面</h1>
        <el-form ref="form" :model="usermodel" label-width="80px">
            <el-form-item label="姓名">
                <el-input placeholder="请输入姓名" v-model="usermodel.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="usermodel.pwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="记住">
                <el-select v-model="usermodel.expire" placeholder="请选择免登录时间">
                    <el-option label="一直登录" value="0"></el-option>
                    <el-option label="7天内免登录" value="7"></el-option>
                    <el-option label="15天内免登录" value="15"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            usermodel:{
                name:'',
                pwd:'',
                expire:'0'
            },
            msg:'',
            success:false,
            user:{}
        },
        created(){
            this.onSubmit()
        },
        methods:{
            onSubmit(){
                //alert('登录')
                axios.post('/login' , this.usermodel)
                    .then(response=>{
                        console.log(response)
                        this.msg = response.data.msg
                        let code = response.data.code

                        if(code==200){
                            //登录成功后的user信息
                            this.user = response.data.data
                            this.success = true
                            this.$message({showClose: true,message: this.msg,type: 'success'});
                        }else if(code==455){
                            this.$message({showClose: true,message: this.msg,type: 'error'});
                        }
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },
            logout(){
                this.user = {}
                this.msg = '用户已登出'
                this.usermodel = {name:'', pwd:'', expire:'0'}
                this.success = false
            }
        }
    })
</script>
</body>

</html>